<template>
	<view class="user-coupon-success">
		<view class="coupon-item">
			<view class="coupon-item-left">
				<view class="coupon-price" v-if="couponInfo.type==1">￥<text>{{couponInfo.money}}</text></view>
				<view class="coupon-price" v-if="couponInfo.type==2"><text>{{couponInfo.discount}}</text>折</view>
				<view class="coupon-des" v-if="couponInfo.type==1">满{{couponInfo.satisfy_money}}可用</view>
			</view>
			<view class="coupon-item-center">
				<view class="coupon-name">{{couponInfo.coupon_name}}</view>
				<view class="coupon-time">有效期：{{couponInfo.stop_time}}</view>
			</view>
		</view>
		<view class="input"><input type="number" placeholder="请输入手机号码" v-model="phone" /></view>
		<view class="btn"><button type="primary" @click="receive">领取优惠券</button></view>
		<view class="coupon-rule">
			<view class="coupon-rule-tit">使用规则</view>
			<view class="coupon-rule-info">
				<u-parse :html="rule"></u-parse>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				key: '',
				couponInfo: '',
				phone: '',
				rule: '<p>1.优惠券仅限在有效期内使用,过期则无法使用;</p><p>2.少量特殊商品不能使用优惠券</p><p>3.一个订单只能使用一张优惠券,优惠券不可合并;</p><p>4.每张优惠券只能使用一次,抵价金额未用完下次也不能继续使用;</p><p>5.使用优惠券的订单被取消后,优惠券将在订单取消10分钟左右返还至账户,优惠券有效期不变;</p>',
			};
		},
		onLoad(options) {
			this.key = options.key
			this.couponInfo = JSON.parse(options.info)
			let pages = getCurrentPages();
			let curPage = pages[pages.length - 1];
			uni.setStorageSync('newurl',curPage.$page.fullPath)
			this.AddFoot('赠送优惠券-领取页面')
		},
		methods: {
			AddFoot(where){
				this.$u.api.AddFoot({
					// #ifdef MP
					type: 1,
					// #endif
					//#ifdef APP-PLUS
					type: 2,
					// #endif
					//#ifdef H5
					type: 3,
					// #endif
					store_id: 1,
					client: 1,
					where: where,
					stay_time: 0,
					goods_id: 0,
					store_goods_id: 0
				})
			},
			receive(){
				if(!this.phone){
					return uni.showToast({
						icon: 'none',
						title: '请输入手机号码'
					})
				}
				let data = {
					number: this.key,
					phone: this.phone
				}
				this.$u.api.GetCoupon(data).then(res => {
					this.AddFoot('赠送优惠券-领取页面-点击领取')
					uni.showModal({
						title: '温馨提示',
						content: '优惠券领取成功，是否查看优惠券？',
						showCancel:  false,
						success: (confirm) => {
							if(confirm.confirm){
								uni.navigateTo({
									animationDuration: 500,
									url: '/my/coupon-list/coupon-list'
								})
								this.AddFoot('赠送优惠券-领取页面-点击领取-查看我的优惠券')
							}else if(confirm.cancel){
								if(uni.getStorageSync('is_open')){
									uni.switchTab({
										url: '/pages/merchant/merchant'
									})
								}else{
									uni.switchTab({
										url: '/pages/index/index'
									})
								}
							}
						}
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	.user-coupon-success{
		padding: 30rpx;
		.coupon-item{
			display: flex;
			background-color: #FFF;
			margin-bottom: 40rpx;
			border-radius: 8rpx;
			overflow: hidden;
			&:last-child{
				margin-bottom: 0;
			}
			.coupon-item-left{
				width: 180rpx;
				height: 150rpx;
				background-color: #F59359;
				color: #FFF;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				position: relative;
				.coupon-price{
					margin-bottom: 10rpx;
					text{
						font-size: 42rpx;
					}
				}
				.coupon-des{
					font-size: 20rpx;
				}
				&::before{
					content: '';
					position: absolute;
					width: 20rpx;
					height: 20rpx;
					background-color: #F8F8F8;
					border-radius: 50%;
					bottom: -10rpx;
					right: -10rpx;
					z-index: 1;
				}
				&::after{
					content: '';
					position: absolute;
					width: 20rpx;
					height: 20rpx;
					background-color: #F8F8F8;
					border-radius: 50%;
					top: -10rpx;
					right: -10rpx;
					z-index: 1;
				}
			}
			.coupon-item-center{
				border-right: dashed 2rpx #E6E6E6;
				flex: 1;
				min-width: 0;
				padding: 0 30rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				.coupon-name{
					font-size: 32rpx;
					margin-bottom: 20rpx;
				}
				.coupon-time{
					color: #999;
					font-size: 24rpx;
				}
			}
			.coupon-item-right text{
				padding: 0 20rpx;
				width: 60rpx;
				text-align: center;
				display: flex;
				flex-direction: column;
				justify-content: center;
				color: #F59359;
				font-size: 24rpx;
				background-color: transparent;
				line-height: normal;
				height: 100%;
				&::after{
					display: none;
				}
			}
		}
		.input{
			margin-bottom: 40rpx;
			input{
				width: 100%;
				height: 98rpx;
				line-height: 90rpx;
				text-align: center;
				background-color: #F8F8F8;
				font-size: 32rpx;
				border-radius: 8rpx;
			}
		}
		.coupon-rule{
			margin-top: 100rpx;
			.coupon-rule-tit{
				font-size: 32rpx;
				color: #333;
				margin-bottom: 40rpx;
			}
			.coupon-rule-info{
				color: #808080;
				font-size: 24rpx;
				line-height: 42rpx;
			}
		}
		.btn{
			button{
				background-color: #141414;
				font-size: 32rpx;
			}
		}
	}
</style>
